<template>
    <div class="restContainer">
        <HeaderTop head-title="重置密码" goBack="true"></HeaderTop>
        <form @submit.prevent class="restForm">
            <section class="input_container phone_number">
                <input type="text" placeholder="账号" name="phone" maxlength="11" v-model="phoneNumber" @input="inputPhone">
            </section>
            <section class="input_container">
                <input type="text" placeholder="旧密码" name="oldPassWord" v-model="oldPassWord">
            </section>
            <section class="input_container">
                <input type="text" placeholder="请输入新密码" name="newPassWord" v-model="newPassWord">
            </section>
            <section class="input_container">
                <input type="text" placeholder="请确认密码" name="confirmPassWord" v-model="confirmPassWord">
            </section>
            <section class="input_container captcha_code_container">
                <input type="text" placeholder="验证码" name="mobileCode" maxlength="6" v-model="mobileCode">
                <div class="img_change_img">
                    <img v-show="captchaCodeImg" :src="captchaCodeImg">
                    <div class="change_img" @click="getCaptchaCode">
                        <p>看不清</p>
                        <p>换一张</p>
                    </div>
                </div>
            </section>
        </form>
        <div class="login_container" @click="resetButton">确认修改</div>
        <alert-tip v-if="showAlert" :alertText="msg"></alert-tip>
    </div>
</template>

<script>
import HeaderTop from '@src/components/header/HeaderTop';
import AlertTip from '@src/components/common/AlertTips';
import {getcaptchas } from '@src/api/getData'
// mobileCode, checkExsis, sendMobile, changePassword
export default {
    components:{
        HeaderTop,
        AlertTip
    },
    data(){
        return {
            phoneNumber: null, //电话号码
            oldPassWord: null,
            newPassWord: null, //新密码
            rightPhoneNumber: false, //输入的手机号码是否符合要求
            confirmPassWord: null, //确认密码
            captchaCodeImg: null, //验证码地址
            mobileCode: null, //短信验证码
            computedTime: 0, //倒数记时
            showAlert: false, //显示提示组件
            alertText: null, //提示的内容
            accountType: 'mobile',//注册方式
            captchaCodeImg: null,
            showAlert:false,
        }
    },
    created(){
        this.getCaptchaCode()
    },
    methods:{
        async getCaptchaCode(){
            let res = await getcaptchas();
            this.captchaCodeImg = res.code;
        },
        inputPhone(){

        },
        resetButton(){

        }
    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.restContainer{
    padding-top: 2.2rem;
    background: #f2f2f2;
    .restForm{
        background: #fff;
        margin-top: 0.6rem;
        .input_container{
            @include fj;
            padding: .6rem .8rem;
            border-bottom: 0.025rem solid #f1f1f1;
            input{
                @include sc(.7rem, #666);
            }
            
        }
        .captcha_code_container{
            height: 2.2rem;
            .img_change_img{
                display: flex;
                align-items: center;
                img{
                    @include wh(3.5rem, 1.5rem);
                    margin-right: .2rem;
                }
                .change_img{
                    display: flex;
                    flex-wrap: wrap;
                    width: 2rem;
                    justify-content: center;
                    p{
                        @include sc(.55rem, #666);
                    }
                    p:nth-of-type(2){
                        color: #3b95e9;
                        margin-top: .2rem;
                    }
                }
            }
        }
    }
    .login_container{
        margin: 1rem .5rem;
        @include sc(.7rem, #fff);
        background-color: #4cd964;
        padding: .5rem 0;
        border: 1px;
        border-radius: 0.15rem;
        text-align: center;
    }
}
</style>